<template>
  <el-aside width="200px" style="min-height:700px;" >
    <el-scrollbar>
      <el-menu >
        <el-menu-item index="1">
          <el-icon><document /></el-icon>
          <span>联系方式</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-aside>
  <el-main>
    <el-card class="box-card" shadow="always">
      <template #header>
        <div class="card-header">
          <span>占星咨询</span>
        </div>
      </template>
      <div class="card-content">
        <el-row>
          <el-col :span="24">
            <el-image style="width: 150px; height: 150px" :src="require('@/assets/images/liuye_weixin.jpg')" fit="cover" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>邮箱:13331178501@163.com</span>
          </el-col>
        </el-row>

      </div>
    </el-card>

  </el-main>
</template>

<script>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {onMounted} from "vue";

export default {
  name: "Contact",
  components:{
    Document
  },
  setup(){
    const setElAsideStyle = function (){
      let viewHeight = window.innerHeight;
      let viewWidth = window.innerWidth;
      if(viewHeight > viewWidth){
        let elAsideClass = document.getElementsByClassName("el-aside");
        for(let i=0;i<elAsideClass.length;i++){
          let asideStyle = "display: none;";
          elAsideClass[i].setAttribute('style', asideStyle);
        }
      }
    }

    onMounted(() => {
      setElAsideStyle()
      // 监听浏览器高度变化
      window.onresize = () => {
        setElAsideStyle()
      };
    })

  }
}
</script>

<style scoped>

</style>